<!-- eslint-disable vue/no-mutating-props -->
<script lang="ts" setup>
import Color from 'color'
import { Dialog } from 'vant'
import lodash from 'lodash'
import type { OrderItemModel } from '~/model'
import { QuantityWithWeight } from '~/model/ItemRecommendModel'

const props = defineProps<{
  row: OrderItemModel
  show: boolean
  quantityArrGetter: () => QuantityWithWeight[]
  // active: boolean
}>()

const emits = defineEmits([
  'update:show',
  'delete',
])

// map: id => quantity
const quantityOptions = ref(new Map<number, number[]>())

// function quantityDelta(d: number) {
//   if (props.row === undefined) {
//     return
//   }
//   props.row.quantity += d
// }

function quantitySet(d: number) {
  if (props.row === undefined) {
    return
  }
  props.row.quantity = d
  emits('update:show', false)
}

const quantityArr: Ref<QuantityWithWeight[]> = ref([])

onMounted(async () => {
  // const allOrder = await OrderApi.getAll()

  // // map: (id, quantity) => counter
  // const mIdQuantityCounter = new Map<number, Map<number, number>>()

  // for (const order of allOrder) {
  //   for (const item of order.items) {
  //     const id = item.material!.id
  //     const quantity = item.quantity

  //     // name, quantity => count
  //     // ensure exist k:name
  //     if (mIdQuantityCounter.get(id) === undefined) {
  //       mIdQuantityCounter.set(id, new Map())
  //     }
  //     const mapQuantityCount = mIdQuantityCounter.get(id) as Map<number, number>

  //     // ensure exist k:quantity
  //     const old = mapQuantityCount.get(quantity)
  //     if (old === undefined) {
  //       mapQuantityCount.set(quantity, 1)
  //     }
  //     else {
  //       mapQuantityCount.set(quantity, old + 1)
  //     }
  //   }
  // }
  // mIdQuantityCounter.forEach((mQuantityCounter, name) => {
  //   const pair: {
  //     quantity: number
  //     count: number
  //   }[] = []
  //   mQuantityCounter.forEach((count, quantity) => {
  //     pair.push({ quantity, count })
  //   })
  //   pair.sort((a, b) => b.count - a.count)

  //   quantityOptions.value.set(name, pair.map(x => x.quantity).slice(0, 10))
  // })
})

function calcColor(n: number, arr: QuantityWithWeight[]) {
  const orange = Color('rgb(251 146 60)')
  const _arr = lodash.cloneDeep(arr)
  const qArr = _arr.sort((a, b) => b.weight - a.weight).map(x => x.quantity)
  const index = qArr.indexOf(n)

  let color
  if (index === 0) {
    color = orange
  }
  else if (index < 3) {
    color = orange.lighten(0.2)
  }
  else {
    color = orange.lighten(0.4)
  }

  return color.rgb().string()
}

const innerField = ref(null as any)
// function focusInput() {

// }

// function inputSelect() {
//   setTimeout(() => {
//     innerField.value.select()
//   }, 50)
// }

const inputVal = ref(0)

function inputConfirm() {
  props.row.quantity = inputVal.value
}

watch(() => props.show, (val) => {
  if (val) {
    // 推荐数值更新
    quantityArr.value = props.quantityArrGetter()
    quantityArr.value.sort((a, b) => a.quantity - b.quantity)
    quantityArr.value = quantityArr.value.slice(0, 5)

    // 默认数字更新
    inputVal.value = props.row.quantity

    setTimeout(() => {
      innerField.value.focus()
      innerField.value.select()
    }, 50)
  }
})
</script>

<template>
  <Dialog
    :show="show"
    title="商品数量"
    width="80%"
    :show-cancel-button="true"
    @update:show="$emit('update:show', $event)"
    @confirm="inputConfirm"
  >
    <input
      ref="innerField"
      v-model="inputVal"
      type="number"
      b="none"
      w-full bg-light-5 text-center lh-10
    >
    <!-- :value="row.quantity" -->
    <!-- @input="(event) => row.quantity = Number.parseFloat(event.target?.value)" -->

    <!-- <div flex text-center lh-10 c-white>
      <div flex-1 bg-red-7 @click="quantityDelta(-100)">
        -100
      </div>
      <div flex-1 bg-red-6 @click="quantityDelta(-10)">
        -10
      </div>
      <div flex-1 bg-red-5 @click="quantityDelta(-1)">
        -1
      </div>
      <div flex-1 bg-green-5 @click="quantityDelta(1)">
        +1
      </div>
      <div flex-1 bg-green-6 @click="quantityDelta(10)">
        +10
      </div>
      <div flex-1 bg-green-7 @click="quantityDelta(100)">
        +100
      </div>
    </div> -->
    <div v-if="row" flex flex-wrap text-center lh-10 c-white>
      <div
        v-for="(item, index) in quantityArr" :key="index"
        b-b="1 solid white" b-r="1 solid white" flex-1 bg-orange px2
        :style="{ background: calcColor(item.quantity, quantityArr) } "
        @click="quantitySet(item.quantity)"
      >
        {{ item.quantity }}
      </div>
    </div>
  </Dialog>
</template>

<style scoped>

</style>
